<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height: 252px">
                    <div class="user-info">
                        <el-avatar :size="120" :src="user.avatar" />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ name }}</div>
                            <div>{{ role }}</div>
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height: 252px">
                    <template #header>
                        <div class="clearfix">
                            <span>借阅详情</span>
                        </div>
                    </template>
                  <div style="width: 100%;height: 40px">
                    <div style="height: 40px;width: 90%;float:left">
                      遗失数目:
                    </div>
                    <div style="height: 40px;width: 8%;display: inline-block">{{data.loseNum}}</div>
                  </div>
                  <div style="width: 100%;height: 40px">
                    <div style="height: 40px;width: 90%;float:left">
                      总借阅次数:
                    </div>
                    <div style="height: 40px;width: 8%;display: inline-block">{{data.borrowNum}}</div>
                  </div>
                  <div style="width: 100%;height: 40px">
                    <div style="height: 40px;width: 90%;float:left">
                      待归还数目:
                    </div>
                    <div style="height: 40px;width: 8%;display: inline-block">{{data.outNum}}</div>
                  </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <el-icon class="grid-con-icon"><Document /></el-icon>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{data.typeNum}}</div>
                                    <div>书本类目</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <el-icon class="grid-con-icon"><DocumentCopy /></el-icon>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{data.bookNum}}</div>
                                    <div>书本数据</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <el-icon class="grid-con-icon"><Notebook /></el-icon>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{data.labelNum}}</div>
                                    <div>书本总数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover" style="height: 403px">
                    <template #header>
                        <div class="clearfix">
                            <span>借阅排名</span>
<!--                            <el-button style="float: right; padding: 3px 0" text>添加</el-button>-->
                        </div>
                    </template>

                    <el-table :show-header="false" :data="data.sortBookList" style="width: 100%">

                        <el-table-column>
                            <template #default="scope">
                              <div style="width: 90%;float: left">
                                {{scope.row.bookName}}
                              </div>
                              <div style="width: 8%;display: inline-block">
                                {{scope.row.num}}
                              </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="dashboard">
import Schart from 'vue-schart';
import {reactive, ref} from 'vue';
import imgurl from '../../assets/img/img.jpg';
import {getCurrentUser} from "@/api/user";
const name = localStorage.getItem('username');
const role: string = name === 'admin' ? '超级管理员' : '普通用户';

const data = ref({
  sortBookList: [],
  typeNum: 0,
  loseNum: 0,
  bookPieDataList: {
    label: [],
    data: []
  },
  bookNum: 0,
  lastMonthData: {
    label: [],
    data: []
  },
  outNum: 0,
  borrowNum: 0,
  labelNum: 0
})
const user = ref({
  avatar:imgurl
})
getCurrentUser().then(res=>{
  user.value = res.data
})
const options = ref({
    type: 'pie',
    title: {
        text: '近一个月各类目书本借阅记录'
    },
    legend: {
        position: 'left'
    },
    bgColor: '#fbfbfb',
    labels: [],
    datasets: [{
        data: []
    }]
})
const options2 = ref({
    type: 'pie',
    title: {
        text: '各类目书本统计'
    },
    legend: {
        position: 'left'
    },
    bgColor: '#fbfbfb',
    labels: [],
    datasets: [{
        data: []
    }]
})
const todoList = reactive([
    {
        title: '今天要修复100个bug',
        status: false
    },
    {
        title: '今天要修复100个bug',
        status: false
    },
    {
        title: '今天要写100行代码加几个bug吧',
        status: false
    },
    {
        title: '今天要修复100个bug',
        status: false
    },
    {
        title: '今天要修复100个bug',
        status: true
    },
    {
        title: '今天要写100行代码加几个bug吧',
        status: true
    }
]);
</script>

<style scoped>

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
